<template>
	<view class="content">
    <image src="../../static/logo.png" class="logoImg"></image>
		<text class="welcome-text">欢迎使用 HCiot 充电桩</text>
		<view class="loginBox">
      <u-form :model="loginForm" ref="uForm" style="padding: 8%;">
        <view class="flex-row">
          <u-icon name="account" color="#2979ff" size="32" style="margin-right: 10px;"></u-icon>
          <u-form-item label="账户名" prop="username" label-width="55px">
            <u-input v-model="loginForm.username" placeholder="请输入账户名" type="text" :border="true" />
          </u-form-item>
        </view>
        <view class="flex-row">
          <u-icon name="lock-open" color="#2979ff" size="32" style="margin-right: 10px;"></u-icon>
          <u-form-item label="密码" prop="password">
            <u-input v-model="loginForm.password" placeholder="请输入密码" type="password" :border="true" :password-icon="true" />
          </u-form-item>
        </view>
        <view class="flex-row">
          <u-icon name="hourglass-half-fill" color="#2979ff" size="32" style="margin-right: 10px;"></u-icon>
          <u-form-item label="验证码" prop="code" label-width="55px">
            <u-input v-model="loginForm.code" placeholder="请输入验证码"/>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode">
            </div>
          </u-form-item>
        </view>
      </u-form>
      <u-button type="primary" @click="login" size="medium" style="margin-top: 0%;">登录</u-button>
    </view>
    <u-toast ref="uToast"/>
		<view class="flex-row content-bottom">
			<u-icon name="map" color="#2979ff" size="36"></u-icon>
			<view class="wx-main-text">HCiot</view>
			<view class="wx-minor-text">广东省中山市东区博爱七路25号</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import {mapState} from 'vuex' //引入mapState
	import { postLogin, putSendUesrMsg, getCodeImg, login } from "@/common/js/api/api.js";
	import WXBizDataCrypt from "../../common/js/WXBizDataCrypt.js";
  import { encrypt } from '@/common/js/rsaEncrypt.js'
  import { url_1 } from '../../common/js/api/url.js'
	export default {
		data() {
			return {
        loginForm: {
          username: 'admin',
          password: '123456',
          code: '',
          uuid: ''
        },
        codeUrl: '',
        rules: {
          username: [{
            required: true,
            message: '账号不能为空',
            trigger: ['change', 'blur'],
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            trigger: ['change', 'blur']
          }],
          code: [{
            required: true,
            message: '验证码不能为空',
            trigger: ['change', 'blur']
          }]
        }
			}
		},
		onLoad() {
      uni.startPullDownRefresh();
		},
    onPullDownRefresh() {
      this.getCode();
      this.nickName = 'admin';
      this.password = '123456';
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 500);
    },
		methods: {
      getCode() {
        getCodeImg().then((res) => {
          res = res.data;
          this.codeUrl = res.img;
          this.loginForm.uuid = res.uuid;
          this.loginForm.code = ''
        }).catch((err) => {
          uni.showToast({
            title: err.response.data.message,
            icon: "error",
            duration: 2000
          });
        });
      },
			login() {
        if (!this.loginForm.username || !this.loginForm.password || !this.loginForm.code) {
          return;
        };
        let user = {
          username: this.loginForm.username,
          password: encrypt(this.loginForm.password),
          code: this.loginForm.code,
          uuid: this.loginForm.uuid
        };
        login(user).then(
          res => {
            uni.setStorageSync('token', res.data.token);
            store.commit('adminUser/setAdminUser', {
              token: res.token
            });
            uni.setStorageSync('user', res.user);
            uni.setStorageSync('username', user.username);
            store.commit('user/setUser', {
              nickName: user.username
            });
            this.$bus.$emit('pageIndex',0);
            uni.switchTab({
              url: '../tabBar/home/home'
            })
            this.$forceUpdate();
          }).catch(err => {
          this.getCode();
          uni.showToast({
            title: err.response.data.message,
            icon: "error",
            duration: 2000
          });
        });
			},
      beforeDestroy() {
        this.$bus.$off('pageIndex') //解绑navMenu事件
      }
		},
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    onShow() {
      // 获取验证码
      this.getCode()
    }

	}
</script>

<style>
	@import url("../../common/css/login.css");
</style>
